<script lang="ts" setup>
import AvatarEdit from './AvatarEdit.vue'
import { useFormDisabled, useFormItem } from 'element-plus'

withDefaults(
  defineProps<{
    disabled?: boolean
  }>(),
  {
    disabled: false
  }
)
const modelValue = defineModel<string>({ required: true })
const { formItem } = useFormItem()
const isDisabled = useFormDisabled()
const isEdit = ref(false)

const close = (val?: string) => {
  if (val) {
    modelValue.value = val
    formItem?.validate('change').catch(() => {})
  }
  isEdit.value = false
}
const handleCropper = () => {
  if (!isDisabled.value) {
    isEdit.value = true
  }
}
</script>

<template>
  <div class="overflow-hidden rounded-full w-[100px] h-[100px] el-border cursor-pointer" @click="handleCropper">
    <img v-if="modelValue" :src="modelValue" style="height: 100%; width: 100%" />
    <div v-else class="flex items-center justify-center w-full h-full">
      <el-icon size="20"><Plus /></el-icon>
    </div>
  </div>
  <AvatarEdit v-if="isEdit" :avatar="modelValue" @close="close" />
</template>
